<html>
  <head>
    <title>WebPlayer</title>
    <script src="/webplayer.js"></script>
    <style>
      button {font-size: 22pt;}
      .icon {width: 32px; height: 32px;}
    </style>
  </head>
  <body style="margin: 0px;">
    <div id="top">
      <span id="controls"><button onclick="start()">Start</button></span>
      <span>Power:<img class="icon" id="chargingicon" onclick="toggle()" src="/red"></span>
      <span style="display: none;" id="charging">(charging state unknown)</span>
      <span style="display: none;" id="level">(battery level unknown)</span>
      <span style="display: none;" id="dischargingTime">(discharging time unknown)</span>
      <span style="float: right;" id="refresh"><button onclick="refresh()">Refresh</button></span>
      <audio id=audio src="/audio"></audio>
    </div>
    <div id="bottom">
      <img id="screen" src="/loading" onclick="touch(event);">
    </div>
  </body>
</html>
